import React from 'react';
import ReactDOM from 'react-dom';
import store from './mystore/index'
// import { Provider, connect } from 'react-redux'
import { Provider, connect } from './mystore/react-redux'
// store {getState,dispatch,subscribe}
console.log(store)
class App extends React.Component {
  add = () => {
    this.props.dispatch({ type: 'add', num: 3 })
    console.log(store.getState())
  }
  // componentDidMount() {
  //   this.clear1 = store.subscribe(() => {
  //     this.setState({})
  //   })
  //   this.clear2 = store.subscribe(() => {
  //     console.log(111)
  //   })
  //   this.clear3 = store.subscribe(() => {
  //     console.log(222)
  //   })
  //   this.clear4 = store.subscribe(() => {
  //     console.log(333)
  //   })
  // }
  changecolor = () => {
    this.props.dispatch(function (dispatch) {
      console.log(dispatch)
      setTimeout(() => {
        dispatch({ type: 'changeColor', col: 'blue' })
      }, 2000);
    })
  }
  render() {
    // let state = store.getState()
    // console.log(state)
    return <div className=''>
      <h1 style={{ color: this.props.color }}>{this.props.count}</h1>
      <button onClick={this.add}>+</button>
      <button onClick={this.changecolor}>changcolor</button>
      <button onClick={this.clear1}>clear1</button>
      <button onClick={this.clear2}>clear2</button>
      <button onClick={this.clear3}>clear3</button>
      <button onClick={this.clear4}>clear4</button>
    </div>;
  }
}
App = connect(state => ({ count: state.A.count, color: state.B.color }), dispatch => ({ dispatch }))(App)


ReactDOM.render(<Provider store={store}><App qqq='123' /></Provider>, document.getElementById('root'))